import React, { Component } from 'react'
import axios from 'axios';
import './index.css'
export default class LifeCycle extends Component {
  constructor(){
    super()
    /**
     * 构造函数的作用
     * 1、定义state的初始数据(移动构造函数的外面)
     * 2、进行方法的绑定(进行this执行改变)（使用箭头函数或者直接在调用出进行this指向改变）
     * 3、React.createRef()的方式来进行DOM元素的操作
     * 注意：不一定要显性的写出这个构造函数，如果不需要做如上两个步骤就不用写
     */
    console.log('1、=======构造函数=======');
    this.state={
        list:[]
    }
  }
  render() {
    /**
     * render函数即在挂载阶段运行，也在运行阶段运行
     * 这个方法的作用是将虚拟DOM渲染到页面中来，每当数据发生变化之后，页面要发生变化就要调用render一次
     * 如果render不调用，页面的内容也不会发生变化，我们一定要尽可能不要render多运行，在react减少render运行
     * 次数是react性能优化最重要指标
     */
    console.log('2、=======render=======');
    return (
      <div>
          <table>
            <thead>
                <tr>
                    <td>名称</td>
                    <td>图片</td>
                    <td>年龄</td>
                    <td>性别</td>
                    <td>专业</td>
                </tr>
            </thead>
            <tbody>
                {
                    this.state.list.map(item=><tr key={item._id}>
                        <td>{item.name}</td>
                        <td><img src={item.image||'https://img.ytxfz.com/upload/2885125.jpg'} className='avatar' /></td>
                        <td>{item.age}</td>
                        <td>{item.gender}</td>
                        <td>{item.subjectsId?item.subjectsId.name:''}</td>
                    </tr>)
                }
            </tbody>
          </table>
      </div>
    )
  }
  componentDidMount(){
    /**
     * 会在组件挂载后（插入 DOM 树中）立即调用,它的作用就相当于vue中mounted,在该函数中完成如下操作
     * 1、网络请求的操作
     * 2、定时器操作
     * 3、原生的js事件绑定
     */
    console.log('3、=======componentDidMount=======');
    this.getStudent()
  }
  async getStudent(){
    const result=await axios.get('http://www.zhaijizhe.cn:3005/students/getStudents')
    console.log('result',result.data.data.result);
    this.setState({
        list:result.data.data.result
    })
  }
}
